; ((win, doc) => {
    const ios = doc.querySelector('#ios')

    let ua = navigator.userAgent.toLowerCase()

    const init = () => {
        bindEvent()
    }

    function bindEvent() {
        if (win.DeviceOrientationEvent) {
            if (/android/.test(ua)) {
                win.addEventListener('deviceorientation', orientationHandler, false)
            }
            else if (ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
                // 检测到ios设备，请求授权访问动作与方向
                ios.style.display = 'block'
                ios.addEventListener('click', getAuthorization, false)
            }
            else {
                alert("请使用移动端浏览器访问");
            }
        } else {
            alert("您的浏览器不支持DeviceOrientation");
        }
    }

    function orientationHandler(event) {
        let arrow = doc.querySelector('#arrow')

        let alpha = event.alpha
        let beta = event.beta
        let gamma = event.gamma

        arrow.style.transform = `rotateX(${beta}deg)rotateY(${gamma}deg)rotateZ(${alpha}deg)`
    }

    function getAuthorization() {
        // 请求权限
        DeviceMotionEvent.requestPermission().then(function (state) {
            if ('granted' === state) {
                win.addEventListener('deviceorientation', orientationHandler, false)
            } else {
                alert('apply permission state: ' + state);
            }
        }).catch(function (err) {
            alert('error: ' + err);
        });
    }

    init()
})(window, document)